<script lang="ts" setup>
import { ElMessage } from "element-plus";

type Props = {
  modelValue: boolean;
  title: string;
  type: number;
  formData: any;
};
const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  title: "",
  type: 1,
  formData: () => {}
});
const inputWidth = "200px";
const whiteList = ["admin", "super"];
const role = JSON.parse(localStorage.getItem("authorized-token")).role; // 角色
const isAdmin = !whiteList.includes(role);

const emit = defineEmits(["update:modelValue", "submit-form"]);

const inputHandle = val => {
  emit("update:modelValue", val);
};

const submit = () => {
  let obj;
  if (props.type === 1) {
    if (props.formData.username === "") {
      ElMessage({
        type: "warning",
        message: "账号名称必填请输入"
      });
    } else if (props.formData.password === "") {
      ElMessage({
        type: "warning",
        message: "密码必填请输入"
      });
    } else {
      const {
        name,
        role,
        password,
        username,
        amount,
        quota,
        company_name,
        company_address,
        contact_information,
        desc
      } = props.formData;
      obj = {
        name,
        role,
        password,
        username,
        amount,
        quota,
        company_name,
        company_address,
        contact_information,
        desc
      };
    }
  } else {
    const {
      id,
      name,
      password,
      amount,
      quota,
      company_name,
      company_address,
      contact_information,
      desc
    } = props.formData;
    obj = {
      id,
      name,
      password,
      amount,
      quota,
      company_name,
      company_address,
      contact_information,
      desc
    };
  }
  obj.type = 1;
  emit("submit-form", obj);
};
</script>

<template>
  <el-dialog
    :modelValue="modelValue"
    @update:modelValue="inputHandle"
    :title="title"
    width="50%"
  >
    <span>
      <el-form
        :inline="true"
        :model="formData"
        label-width="auto"
        label-position="left"
      >
        <el-form-item label="客户名称:">
          <el-input v-model="formData.name" :style="{ width: inputWidth }" />
        </el-form-item>
        <el-form-item label="客户密码:">
          <el-input
            v-model="formData.password"
            :style="{ width: inputWidth }"
          />
        </el-form-item>
        <el-form-item label="账号名称:" v-show="type === 1">
          <el-input
            v-model="formData.username"
            :style="{ width: inputWidth }"
          />
        </el-form-item>
        <el-form-item label="账户余额:">
          <el-input-number
            v-model="formData.amount"
            :precision="2"
            :min="0"
            :step="0.1"
            :style="{ width: inputWidth }"
            :disabled="isAdmin"
          />
        </el-form-item>
        <el-form-item label="信用额度:">
          <el-input-number
            v-model="formData.quota"
            :precision="2"
            :min="0"
            :step="0.1"
            :style="{ width: inputWidth }"
          />
        </el-form-item>
        <el-form-item label="公司名称:">
          <el-input
            v-model="formData.company_name"
            :style="{ width: inputWidth }"
          />
        </el-form-item>
        <el-form-item label="公司地址:">
          <el-input
            v-model="formData.company_address"
            :style="{ width: inputWidth }"
          />
        </el-form-item>
        <el-form-item label="联系方式:">
          <el-input
            v-model="formData.contact_information"
            :style="{ width: inputWidth }"
          />
        </el-form-item>
        <el-form-item label="描述:">
          <el-input v-model="formData.desc" :style="{ width: inputWidth }" />
        </el-form-item>
      </el-form>
    </span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="inputHandle(false)">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
